<!-- 选择 -->
<template>
	<view class="vk-data-input-select">
	<!-- 页面开始 -->
		<u-input
			v-if="showInput"
			type="select"
			:value="textCom"
			:modelValue="textCom"
			:placeholder="placeholder"
			:disabled="disabled"
			:input-align="inputAlign"
			@click="open"
		></u-input>
		<u-action-sheet v-if="componentType === 'sheet'"
			:value="isShow"
			:modelValue="isShow"
			:list="localdata"
			:tips="tips"
			:label-name="props.label"
			@input="onInput"
			@click="_change"
		></u-action-sheet>
		<u-select v-else-if="componentType === 'select'"
			:value="isShow"
			:modelValue="isShow"
			:list="localdata"
			:value-name="props.value"
			:label-name="props.label"
			:default-value="defaultValueCom"
			@input="onInput"
			@confirm="_confirm"
		></u-select>
	<!-- 页面结束 -->
	</view>
</template>

<script>
	export default {
		name: 'vk-data-input-select',
		emits: ["update:modelValue", "input", "update:show", "change"],
		props: {
			// 表单值
			value: {

			},
			modelValue: {

			},
			// 是否显示input
			showInput: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: false
			},
			// 数据源
			localdata: {
				type: Array,
				default () {
					return []
				}
			},
			// 提示
			placeholder: {
				type: String,
				default: "请选择"
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 组件类型
			componentType: {
				type: String,
				default: "sheet"
			},
			inputAlign: {
				type: String
			},
			tips: {
				type: Object,
				default () {
					return {}
				}
			},
			props: {
				type: Object,
				default () {
					return {
						value: 'value',
						label: 'label'
					};
				}
			}
		},
		data: function() {
			// 组件创建时，进行数据初始化
			return {
				isShow: false
			};
		},
		mounted() {
			this.init();
		},
		methods: {
			// 初始化
			init() {

			},
			// 向父组件发送更新value事件
			_updateValue(value) {
				this.$emit("input", value);
				this.$emit("update:modelValue", value);
				this.$emit("change", value);
			},
			onInput(value) {
				this.isShow = value;
				this.$emit("update:show", value);
			},
			// 监听 - 值改变事件
			_change(index) {
				let value = this.localdata[index][this.props.value];
				this._updateValue(value);
			},
			open() {
				if (!this.disabled) {
					this.isShow = true;
				}
			},
			_confirm(e) {
				let value = e[0][this.props.value];
				this._updateValue(value);
			}
		},
		watch: {
			show: {
				immediate: true,
				handler(newVal) {
					if (this.isShow !== newVal) {
						this.$nextTick(() => {
							this.isShow = newVal;
						});
					}
				}
			}
		},
		// 计算属性
		computed: {
			valueCom() {
				// #ifdef VUE2
				return this.value;
				// #endif

				// #ifdef VUE3
				return this.modelValue;
				// #endif
			},
			textCom() {
				let { valueCom: value, localdata } = this;
				let str = "";
				if (typeof value !== "undefined") {
					let item = localdata.find((v) => {
						return v[this.props.value] === value;
					});
					if (item) {
						str = item[this.props.label];
					}
				}
				return str;
			},
			defaultValueCom() {
				let { valueCom: value, localdata } = this;
				let arr = [];
				if (typeof value !== "undefined") {
					let index = localdata.findIndex((v) => {
						return v[this.props.value] === value;
					});
					if (index > -1) {
						arr[0] = index;
					}
				}
				return arr;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.vk-data-input-select {
		position: relative;
		-webkit-box-flex: 1;
		padding: 0px;
		border-color: rgb(220, 223, 230);
		text-align: left;
		width: 100%;
	}
</style>